<template>
	<view v-show="isShow">
		<view class="flex justify-center mt15" :style="{ marginTop: marginTop + 'rpx' }" v-if="type === 'listLoading'"><view :class="size"></view></view>
		<view class="flex justify-center align-center pageloading " v-if="type === 'pageLoading'"><view :class="size"></view></view>
	</view>
</template>

<script>
export default {
	name: 'loading',
	props: {
		isShow: {
			type: Boolean,
			default: !1
		},
		size: {
			type: String,
			default: 'base'
		},
		type: {
			type: String,
			default: 'pageLoading'
		},
		marginTop: {
			type: Number,
			default: 0
		}
	},
	computed: {},
	data: function() {
		return {};
	}
};
</script>

<style>
.sm {
	border: 5rpx solid #eee;
	border-radius: 50%;
	border-top-color: #2a7e35;
	height: 50rpx;
	width: 50rpx;
}

.base,
.sm {
	animation: load 1s linear infinite;
}

.base {
	border: 8rpx solid #eee;
	border-radius: 50%;
	border-top-color: var(--nav-bg);
	height: 80rpx;
	width: 80rpx;
}

.lg {
	animation: load 1s linear infinite;
	border: 12rpx solid #eee;
	border-radius: 50%;
	border-top-color: var(--nav-bg);
	height: 120rpx;
	width: 120rpx;
}

@-webkit-keyframes load {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(1turn);
	}
}

@keyframes load {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(1turn);
	}
}

.pageloading {
	background-color: #f4f4f4;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
</style>
